<!-- 热门游戏组件,用来轮播 -->
<template>
  <div class="card">
    <!-- 左侧视频 -->
    <div class="left">
        <video @play="setPlayFlag" ref="gameVideo" class="game-video" controls controlsList="nofullscreen" :poster="`${game.photo}`">
            <source :src="game.video" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <!-- 右侧游戏图片以及信息 -->
    <div class="right" @click="toDetail">
        <span class="tit" :title="game.gname">
            {{ game.gname }}
        </span>
        <div class="pics">
            <div class="p-line">
                <img class="pic" :src="`${game.photoa}`" />
                <img class="pic" :src="`${game.photob}`" />
            </div>
            <div class="p-line">
                <img class="pic" :src="`${game.photoc}`" />
                <img class="pic" :src="`${game.photod}`" />
            </div>
        </div>
        <!-- 具体信息 -->
        <div class="info">
            <span class="i-tit">发布时间：{{ game.onsaledate }}</span>
            <div class="tags">
                <span class="tag" v-for="(v,i) in tags" :key="i"><span v-if="v!='null'">{{ v }}</span></span>
            </div>
        </div>
        <span class="price" v-if="game.price!=0">￥{{ game.price }}</span>
        <span class="price" v-else>免费开玩</span>
    </div> 
  </div>
</template>
 
<script>
export default {
    props:{
        game:{
            type: Object,
            default: {},
        },
        num:{
            type: Number,
            default: 0,
        },
    },
    data(){
        return{
 
        }
    },
    computed:{
        tags(){
            var str = this.game.moretype+'';
            return str.split(',');
        },
        // videoUrl(){
        //     var str = this.game.video+'';
        //     if(str.includes('http')) return this.game.video;
        //     return `${this.game.video}`;
        // }
    },
    methods:{
        // 进入详情页
        toDetail(){
            this.$store.commit('saveCurGame',this.num);
            this.$router.push(`/home/detail?id=1`);
        },
        // 设置播放器控制
        setPlayFlag(){
            this.$store.commit('changeVideoPlay',true);
            console.log(1)
        },
        // 暂停视频播放
        pauseVideo() {
            if (this.$refs.gameVideo && !this.$refs.gameVideo.paused) {
                this.$refs.gameVideo.pause();
                this.$store.commit('changeVideoPlay', false);
            }
        }
    },
    mounted(){

    },
}
</script>

<style lang="less" scoped>
// 卡片组件样式
.card{
    display: flex;
    color: #e0e1e3;
    height: 100%;
    justify-content: space-between;
    // 左侧视频样式
    .left{
        width: 600px;
        height: 100%;
        background-color: #000;
        overflow: hidden;
        .game-video{ 
            width: 100%;
            height: 100%;
            max-width: 100%; /* 保证视频不会超过父元素的宽度 */
            &::-webkit-media-controls-fullscreen-button{
                display: none;
            }
        }
    }
    // 右侧信息样式
    .right{
        width: 350px;
        padding: 0px 5px;
        height: 100%;
        background-color: #0E1821;
        display: flex;
        flex-direction: column;
        text-align: left;
        justify-content: space-between;
        cursor: pointer;
        .tit{
            height: 10%;
            font-size: 20px;
            padding: 18px 12px;
            // 溢出打点
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .pics{
            height: 45%;
            display: flex;
            flex-direction: column;
            width: 100%;
            .p-line{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 2px 0px;
                width: 100%;
                .pic{
                    width: 49%;
                    height: 90px;
                    background-color: grey;
                    object-fit: cover;
                    object-position: center;
                }
            }
        }
        .info{
            height: 35%;
            padding: 18px 12px;
            display: flex;
            flex-direction: column;
            .i-tit{
                font-size: 17px;
                padding: 6px 0px 8px 0px;
            }
            .tags{
                display: flex;
                flex-wrap: wrap;
                max-height: 50px;
                overflow: hidden;
                .tag{
                    background-color: #394148;
                    font-size: 12px;
                    padding: 3px 8px;
                    margin: 1px 2px;
                    border-radius: 3px;
                    flex-shrink: 0;
                }
            }
        }
        .price{
            height: 10%;
            padding: 0px 12px 10px 12px;
        }
    }
}
</style>